<template>
  <view>
    <view class="no" v-if='!formData && hasLoaded'>
      {{day}}, 您今日未打卡
    </view>
    <view v-if='!!formData && hasLoaded'>
      <uni-section title="打卡日期 :" type="line">
        <view class="item">
          {{formData.clockDate}}
        </view>
      </uni-section>
      
      <uni-section title="上午打卡时间:" type="line">
        <view class="item">
          {{formData.clockInRealTime}}
        </view>
      </uni-section>
      <uni-section title="上午打卡状态:" type="line">
        <view class="item">
          {{amStatusMap[formData.clockInStatus]}}
        </view>
      </uni-section>
      <uni-section title="下午打卡时间:" type="line">
        <view class="item">
          {{formData.clockOutRealTime}}
        </view>
      </uni-section>
      <uni-section title="下午打卡状态:" type="line">
        <view class="item">
          {{pmStatusMap[formData.clockOutStatus]}}
        </view>
      </uni-section>
      
      <uni-section title="补卡日期:" v-if='formData.replacementDate' type="line">
        <view class="item">
          {{formData.replacementDate}}
        </view>
      </uni-section>
    </view>

  </view>
</template>

<script>
  import {
    SIGN_ON_STATUS_ENUM
  } from '../../constants/constants'
  import {
    getDetailByDay
  } from '../../utils/api'
  export default {
    data() {
      return {
        day: '',
        formData: {
        },
        amStatusMap: {
          0: '异常',
          1: '正常',
          2: '迟到',
          3: '已补卡'
        },
        pmStatusMap: {
          0: '早退打卡',
          1: '正常',
          2: '未打卡',
          3: '已补卡'
        }
      }
    },
    onLoad({
      day
    }) {
      this.day = day
      this.getDetail()
    },
    methods: {
      async getDetail() {
        this.hasLoaded = false
        const res = await getDetailByDay({
          day: this.day
        })

        this.formData = res
        this.hasLoaded = true
      },
      cancel() {

      }
    }
  }
</script>

<style>
  .item {
    padding: 0 40rpx;
  }
  .no {
    height: 800rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>